<template>
   <div>
      <el-form  label-width="80px" >
            <el-form-item label="图片">
                <img class="Image_show" :src="active_component.propValue.value" alt="">
                <div>
                    <el-button type="primary" @click="checkImg" size="small">修改图片</el-button>
                </div>
            </el-form-item>
              <el-form-item label="宽高">
                <div class="flex-align">
                    <el-input style="width:100px;" v-model="active_component.style.width"></el-input>
                    <div class="unloack_radio"></div>
                    <el-input  style="width:100px;" v-model="active_component.style.height"></el-input>
                </div>
            </el-form-item>
             <el-form-item label="描述">
               <el-input
                    type="textarea"
                    :rows="3"
                    style="width:300px;"
                    placeholder="请输入内容"
                    v-model="active_component.propValue.Alt">
                    </el-input>
            </el-form-item>
            <el-form-item label="图形">
                <div class="flex-around jz_box">
                        <div
                        class="jz-photo-group"
                        :class="active_component.propValue.tabIndex == 0 ? 'group_active' : ''"
                        @click="changetab(0)"
                        >
                        <div class="jz_style_img_0 jz_style_img"></div>
                        </div>
                        <div
                        class="jz-photo-group"
                        :class="active_component.propValue.tabIndex == 1 ? 'group_active' : ''"
                        @click="changetab(1)"
                        >
                        <div class="jz_style_img_1 jz_style_img"></div>
                        </div>
                        <div
                        class="jz-photo-group"
                        :class="active_component.propValue.tabIndex == 2 ? 'group_active' : ''
                        "
                        @click="changetab(2)"
                        >
                        <div class="jz_style_img_2 jz_style_img"></div>
                        </div>
                        <div
                        class="jz-photo-group"
                        :class="
                            active_component.propValue.tabIndex == 3 ? 'group_active' : ''
                        "
                        @click="changetab(3)"
                        >
                        <div class="jz_style_img_3 jz_style_img"></div>
                        </div>
                    </div>
            </el-form-item>
            <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="高级设置" name="1">
                   <div class="flex-align">
                <div style="width: 50px">透明：</div>
                <el-slider
                  :max="100"
                  style="width: 150px"
                  v-model="active_component.propValue.opacity"
                  :show-tooltip="false"
                ></el-slider>
                <el-input
                  v-model="active_component.propValue.opacity"
                  style="width: 60px; margin-left: 10px"
                ></el-input>
                %
              </div>

              <div class="flex-align" v-if=" active_component.propValue.tabIndex==2">
                <div style="width: 50px">圆角：</div>
                <el-slider
                  :max="100"
                  style="width: 150px"
                  v-model="active_component.propValue.radius"
                  :show-tooltip="false"
                ></el-slider>
                <el-input
                  v-model="active_component.propValue.radius"
                  style="width: 60px; margin-left: 10px"
                ></el-input>
                px
              </div>
            </el-collapse-item>
            </el-collapse>
        </el-form>
        <div class="flex-center" style="margin-top: 10rem">
      <el-button size="small" type="" @click="closeTK">取消</el-button>
      <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>


        <el-dialog
        title="提示"
        :visible.sync="imgKu"
        width="1000px"
        append-to-body
        >
        <CusImage @closeTK="closeTK2"></CusImage>
        </el-dialog>

   </div>
</template>

<script>
import  CusImage  from '../Image/index.vue';
export default {
     props: ["componentId", "componentList", "activeCompont"],
 components:{CusImage},
 data() {
    return {
        active_component: {},
        activeName:'1',
        imgKu:false,
    }
 },
     created() {
        if(this.activeCompont){
            this.active_component =this.activeCompont
        }else{
            for (let key in this.componentList) {
                if (
                    this.componentList[key].isDialog &&
                    this.componentList[key].propValue.name == this.componentId
                ) {
                    this.active_component =JSON.parse(JSON.stringify(this.componentList[key]))
                }
            }
        }
    },
     methods: {
        checkImg(){
            this.imgKu=true
        },
        closeTK(){
            this.$emit("closeTK")
        },
        closeTK2(e) {
            console.log(e);
            this.active_component.propValue.value = e
            this.imgKu = false
        },
         changetab(i) {
            this.active_component.propValue.tabIndex = i;
           },
        pushcanvas() {

        if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
            this.$emit("closeTK")//关闭弹框
        }else{
            let canvasStyle = this.$store.state.canvasStyleData;
          let component = this.active_component;
          component.style.top = Number(canvasStyle.height);
          component.style.left = 0;
          this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
                  Number(canvasStyle.height) + Number(component.style.height)
                );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK")//关闭弹框
        }

    },
    },
}
</script>

<style lang="scss" scoped>

.Image_show{
    width: 140px;object-fit: contain;
    height: 90px;
    border: 1px solid #eee;
}
.unloack_radio{
    cursor: pointer;
    background: url(https://fe.faisys.com/component_1_0/image/component.png?v=201811211600) -1118px 0;
    width: 26px;
    height: 7px;
    display: inline-block;
    background-position: -1153px 0;
}

 .jz_box {
    width: 300px;
  }
  .jz-photo-group {
    width: 59px;
    height: 43px;
    cursor: pointer;
    border: 1px solid #eee;
    .jz_style_img {
      width: 57px;
      height: 41px;
      background: url("https://2.ss.faisys.com/image/v2/mbg01.png?v=202201101214") no-repeat;
    }
    .jz_style_img_0 {
      background-position: -1110px -781px;
    }
    .jz_style_img_1 {
      background-position: -1110px -883px;
    }
    .jz_style_img_2 {
      background-position: -1110px -830px;
    }
    .jz_style_img_3 {
      background-position:-1110px -932px;
    }
    }
    .group_active {
  border: 1px solid #5874d8 !important;
  position: relative;
}
.group_active::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 24px;
  background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
</style>
